<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>专栏管理</title>

	<script src="../static/js/vue.js"></script>
	<script src="../static/js/axios.js"></script>
	<link rel="stylesheet" href="../static/elementui/theme-chalk/index.css" />
	<script src="../static/elementui/index.js"></script>

	<style>
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 78px;
			height: 78px;
			line-height: 78px;
			text-align: center;
		}
		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
		.pagechose{
			float: right;
		}
	</style>
</head>
<body>
<div id="div">
	<el-divider></el-divider>
	名称：<el-input placeholder="请输入名称" style="width: 200px;" v-model="ruleForm.specialName"></el-input>
	编号：<el-input placeholder="请输入编号" style="width: 200px;" v-model="ruleForm.specialNo"></el-input>
	类别：<el-select slot="prepend" placeholder="请选择" style="width: 150px;" v-model="ruleForm.typeStatus">
	<el-option label="所有" value="0"></el-option>
	<el-option label="CMA" value="1"></el-option>
	<el-option label="CPA" value="2"></el-option>
</el-select>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<el-button type="primary" size="small" @click="find()">查询</el-button>
	&nbsp;&nbsp;&nbsp;
	<el-button type="primary" size="small" @click="resetForm1()">重置</el-button>
	<el-divider></el-divider>


	<!-- 修改模态框 -->
	<el-dialog title="编辑" :visible.sync="dialogTableVisible4add" @close="resetForm()">
		<table  cellspacing="20" style="width: 100%;" >
			<tr>
				<td>专栏名称:</td>
				<td colspan="5" >
					<el-input s v-model="formData.specialName" placeholder="最多输入40个字"></el-input>
				</td>
			</tr>
			<tr>
				<td>类别：</td>
				<td colspan="5">
					<el-select style="width: 150px;" v-model="formData.fkProjectId">
						<el-option :label="p.projName" :value="index+1" v-for="(p,index) in pro" :key="index"></el-option>
					</el-select>
				</td>
			</tr>


			<tr>
				<td>主图：</td>
				<td colspan="5">
					<el-upload
							class="avatar-uploader"
							action="http://localhost:8080/ep/files/upload"
							:show-file-list="false"
							:on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload">
						<img v-if="formData.imageUrl" :src="formData.imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>

					<template slot-scope="scope">
						<img width="50px" height="50px" :src="formData.imageUrl"/>
					</template>


				</td>
			</tr>

			<tr>
				<td>简介:</td>
				<td colspan="5">
					<el-input type="textarea" :rows="4" placeholder="最多输入40个字" v-model="formData.entityDesc" >
					</el-input>
				</td>
			</tr>

			<td >视频：</td>
			<td colspan="5">
				<el-upload
						class="avatar-uploader"
						action="http://localhost:8080/ep/files/upload"
						:show-file-list="false"
						:on-success="handleAvatarSuccess1"
						:before-upload="beforeAvatarUpload1">
					<img v-if="formData.detail" :src="formData.detail" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>

				<template slot-scope="scope" >
					<img width="50px" height="50px" :src="formData.detail"/>
				</template>
			</td>
			</tr>

			<tr>
				<td>价格：</td>
				<td colspan="5">
					<el-input placeholder="元" style="width: 250px;" v-model="formData.price"></el-input>
				</td>
			</tr>

			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td>
					<el-button type="primary" @click="addColu()">保存</el-button>
				</td>
				<td>
					<el-button type="primary" @click="resetForm()">取消</el-button>
				</td>
			</tr>
		</table>
	</el-dialog>

	<div class="container">
		<table class="table" style="text-align:center; width: 100%"  >
			<thead>
			<tr>
				<th style="display:none">序号</th>
				<th>编号</th>
				<th>创建时间</th>
				<th>类别</th>
				<th>名称</th>
				<th>视屏数量</th>
				<th>播放量</th>
				<th>上架</th>
				<th>操作</th>
			</tr>
			</thead>
			<tbody>
			<tr v-for="(p,index) in rows" :key="index" style="height: 50px">
				<td style="display:none;">{{index}}</td>
				<td>{{p.specialNo}}</td>
				<td>{{p.createTime}}</td>
				<td>{{p.projName}}</td>
				<td>{{p.specialName}}</td>
				<td>{{p.videoNum}}</td>
				<td>{{p.viewCounts}}</td>
				<td>
					<el-switch v-model="csData[index]" active-color="#13ce66" @change="changeSwitch(csData[index],index)">
					</el-switch>
				</td>
				<el-row>
					<td :class="'text-center'">
						<el-button type="primary" size="mini" @click="compile(index)">编辑</el-button>
						<el-button type="primary" size="mini" @click="del(index)">删除</el-button>
					</td>
				</el-row>
			</tr>
			</tbody>
		</table>
	</div>

	<!--分页展示-->
	<div class="pagechose">
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
					   :page-sizes="[5, 20, 30, 50]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
	</div>
</div>
</body>
<script>
	let id
	let allColumn = []
	let div = new Vue({
		el: "#div",
		data: {
			/*  */
			csData: [],

			/*分页参数*/
			total: 0,
			size: 5,
			page: 1, //当前页
			/*分页参数*/

			/* 展示的数据 */
			rows: [],

			/*项目数据*/
			pro:[],

			ruleForm: {
				specialName: "",
				specialNo: "",
				typeStatus: ""
			},
			dialogTableVisible4add: false, //添加窗口显示状态
			dialogTableVisible4edit: false, //编辑窗口显示状态
			//添加表单的数据
			formData: {
				specialName: "",
				fkProjectId: "",
				entityDesc: "",
				projName:"",
				price: "",
				imageUrl: '',
				detail:"",
			},

			/* ....... */
			tableData: [{
				address: '',
			}],
			/* ...... */


		},

		methods: {

			/**/
			handleAvatarSuccess(res, file) {
				console.info(res);
				this.formData.imageUrl=res;

			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			/**/

			/**/
			handleAvatarSuccess1(res, file) {
				console.info(res);
				this.formData.detail = res;

			},
			beforeAvatarUpload1(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			/**/

			/*删除弹框*/
			del:function(inedx) {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.del1(inedx)
					this.total=this.total-1
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//



			/*删除专栏*/
			del1: function(index) {
				let columnId = this.rows[index].id
				axios.get("[[@{/special/del}]]", {
					params: {
						id: columnId
					}
				}).then(res => { //此处一定要用 箭头函数  不然this 就不是this
					console.info(res)
					console.info(res.data.data)
					this.rows.splice(index, 1)
				});
			},
			/* 编辑 */
			compile: function(index) {
				//弹出窗口
				this.dialogTableVisible4add = true;
				console.info(this.rows[index])
				this.formData.specialName = this.rows[index].specialName
				this.formData.fkProjectId = this.rows[index].fkProjectId
				this.formData.entityDesc = this.rows[index].descr
				this.formData.price = this.rows[index].price
				this.formData.imageUrl=this.rows[index].masterDrawing
				id = this.rows[index].id
			},
			/*修改*/
			addColu:function(index){
						axios.get("[[@{/special/upColumn}]]", {
							params: {
								id: id,
								specialName: this.formData.specialName,
								fkProjectId: this.formData.fkProjectId,
								descr: this.formData.entityDesc,
								price: this.formData.price,
							},
						}).then(function(res) {
							console.info(res)
							console.info(res.data)
						});
				//关闭添加窗口
				this.dialogTableVisible4add = false;

			},
			/*上架专栏*/
			putColumn: function(index) {
				let columnId = this.rows[index].id
				axios.get("[[@{/special/putColumn}]]", {
					params: {
						id: columnId
					}
				})
						.then(function(res) {
							console.info(res.data)
						});
			},
			/*下架专栏*/
			downColumn: function(index) {
				let columnId = this.rows[index].id
				axios.get("[[@{/special/downColumn}]]", {
					params: {
						id: columnId
					}
				})
						.then(function(res) {
							console.info(res.data)
						});
			},
			/*上下架按钮*/
			changeSwitch(on, index) {
				if (on) {
					this.putColumn(index)
				} else {
					this.downColumn(index)
				}
			},
			/*分页方法*/
			handleSizeChange: function(val) {
				this.size = val
				this.page = 1
				this.rows = []
				if (this.total >= val) {
					for (let i = 0; i < val; i++) {
						this.rows.push(allColumn[i])
					}
				} else {
					for (let i = 0; i < this.total; i++) {
						this.rows.push(allColumn[i])
					}
				}
			},
			handleCurrentChange: function(val) {
				let size = this.size
				this.rows = []
				if (val * size > this.total) {
					for (let i = size * (val - 1); i < this.total; i++) {
						this.rows.push(allColumn[i])
					}
				} else {
					for (let i = size * (val - 1); i < size * val; i++) {
						this.rows.push(allColumn[i])
					}
				}
			},
			/* 查询 */
			find: function() {
				axios.get("[[@{/special/findLike}]]", {
					params: {
						specialName: this.ruleForm.specialName,
						specialNo: this.ruleForm.specialNo,
						fkProjectId: this.ruleForm.typeStatus
					},
				}).then(function(res) {
					console.info(res.data)
					allColumn = res.data.data
					div.$data.rows = []
					div.$data.total = allColumn.length
					for (let i = 0; i < 5; i++) {
						if (i < allColumn.length) {
							div.$data.rows.push(allColumn[i])
						}
					}
				});
			},
			/* 重置 */
			resetForm1: function() {
				this.ruleForm = {};
			},
			resetForm() {
				//关闭添加窗口
				this.dialogTableVisible4add = false;
			},
			/* ..... */
			// 上移
			up1(index) {
				let previousSbiling = this.tableData[index - 1]
				this.tableData.splice(index - 1, 1)
				this.tableData.splice(index, 0, previousSbiling)
			},
			// 添加
			add1() {
				this.tableData.push({
					address: '',
				})
			},
			// 下移
			down1(index) {
				let target = this.tableData[index]
				this.tableData.splice(index, 1)
				this.tableData.splice(index + 1, 0, target)
			},
			// 删除
			deleteItem1(index) {
				if (index - 1 >= 0) {
					this.tableData.splice(index, 1)
				}
			}
			/* ..... */
		},
		mounted() {
			axios.get("[[@{/special/page}]]")
					.then(res => { //此处一定要用 箭头函数  不然this 就不是this
						console.info(res.data.data)
						allColumn = res.data.data
						div.$data.total = allColumn.length
						console.info(div.$data.total)
						for (let i = 0; i <allColumn.length; i++){
							for (let j = i+1; j < allColumn.length; j++){
								if (allColumn[i].projName==allColumn[j].projName){
									i++
								}
							}
							div.$data.pro.push(allColumn[i])
						}
						console.info(this.pro)
						for (let i = 0; i < 5; i++) {
							if (i < allColumn.length) {
								div.$data.rows.push(allColumn[i])
							}
						}
						/*默认选中是什么状态*/
						for (let j = 0; j < allColumn.length; j++) {
							if (allColumn[j].status == 0) {
								this.csData.push(true)
							} else {
								this.csData.push(false)
							}
						}
					});
		},
	});
</script>
</html>
